<template>
  <el-container>
    <!--        <el-header>-->
    <el-image :src="src" :fit="fit" style="height: 180px ;width: 770px;align-self: center;margin: 0px 0px 5px 0px" >
      <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
    </el-image>
    <nav-component style="align-self: center;width: 770px"></nav-component>
    <!--            <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0d73bd">-->
    <!--                <tr>-->
    <!--                    <td width="269"><img height="65" src="@/assets/img/pic_top_01.gif" width="269"></td>-->
    <!--                    <td width="484" align="right"><font color="#000099"><img src="@/assets/img/044.gif" width="466" height="54">&nbsp;</font></td>-->
    <!--                </tr>-->
    <!--            </table>-->
    <!--        </el-header>-->
    <el-main>
      <h3 style="display: inline">{{this.$route.query.nClass}}</h3>
      <p style="display: inline;margin-left: 600px"><a href="/" style="text-decoration: none;color: black">首页</a> ></p>
      <table width="760" border="0" cellspacing="0" cellpadding="0" align="center" height="1">
        <tr><td bgcolor="#CCCCCC"></td></tr>
      </table>
      <br>

      <div>
<!--        <el-input placeholder="日期" v-model="searchData" clearable style="width: 200px;margin-right: 10px"></el-input>-->
<!--        <el-button @click="filterData()" class="dalfBut" icon="el-icon-search">查询</el-button>-->
        <el-button @click="reset()" class="dalfBut" icon="el-icon-refresh">刷新</el-button>
      </div>

      <el-table
          :data="fileList.filter(data => !search || data.nDate.toLowerCase().includes(search.toLowerCase()))"
          stripe
          style="width: 650px;margin: auto"
          height="460px"
          current-row-key="id">
        <el-table-column prop="title" width= "300" align="center">
          <template slot-scope="scope">
            <router-link :to="{name:'newsDetail',query:{title:scope.row.title,author:scope.row.author,date:scope.row.createAt,nClass:scope.row.module}}" style="text-decoration: none;color: black">
              <a href="#" target="_blank" class="buttonText" style="text-decoration: none;color: black">{{scope.row.title}}</a>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="nDate" width= "300" align="center"></el-table-column>
      </el-table>

      <!--分页组件-->
      <div class="pagination-container">
        <el-pagination
            class="pagiantion"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>
      </div>
    </el-main>
    <el-footer>
      <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="30">
        <tr>
          <td bgcolor="#5E739D" valign="middle">
            <div align="center">
                        <span>
                                <font color="#000000">
                                    <a href="/#/login"><font color="#66FF33">管理维护</font></a>
                                    &nbsp;©Copyright 2022-2023<b>&nbsp;和风天气</b>&nbsp;all right reserved
                                </font>
                            </span>
            </div>
          </td>
        </tr>
      </table>
    </el-footer>
  </el-container>
</template>

<script>
import NavComponent from "../components/nav/Nav.vue"
export default {
  name: "SearchPage",
  components:{
    NavComponent
  },
  data() {
    return {
      //图片地址
      src:"https://s1.ax1x.com/2023/05/05/p9NYhJe.jpg",
      //文件信息
      fileList: [],
      //分页相关模型数据
      pagination: {
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
        // date: "",//查询条件""
      },
      search:"",
      searchData:""
    };
  },
  methods: {
    //获取所有文件
    getAll(){
      //发送异步请求
      this.$axios.get("/article/article/articleSearchList?keyword="+this.$route.query.title).then((res)=>{
        // this.pagination.total = res.data.data.total;
        this.fileList = res.data.data;

      });
    },
    //切换页码
    handleCurrentChange(currentPage) {
      //修改页码值为当前选中的页码值
      this.pagination.currentPage = currentPage;
      //执行查询
      this.getAll();
    },
    filterData(){
      let a = this.searchData;
      this.search = a;
    },
    reset() {
      location.reload();
    },
  },
  mounted() {
    this.getAll();
  }
}
</script>

<style scoped>

</style>
